<template>
     <next-paging 
        ref="paging" 
        v-model="dataList" 
        @query="queryList"
        :autoShowBackToTop="true"
        :defaultPageSize="15"
    >
        <!--top插槽-->
       <!-- <template #top><view class="slotTop"><text>我是顶部插槽内容</text></view></template> -->
        <!-- next-paging默认铺满全屏，此时页面所有view都应放在next-paging标签内，否则会被盖住 -->
        <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
        <view class="item" v-for="(item,index) in dataList" :key="index">
            <view><text>{{index+1}}</text></view>   
            <view class="item-title"><text>{{item.title}}</text></view>
        </view>
        <!--bottom插槽-->
      <!--  <template #bottom><view class="slotBottom"><text>我是底部插槽内容</text></view></template> -->
    </next-paging>
</template>

<script>
    export default {
        data() {
            return {
                // v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
                dataList: []
            }
        },
        methods: {
            // @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
            async queryList(pageNo, pageSize) {
                // 此处请求仅为演示，请替换为自己项目中的请求
                if (pageNo > 1224) {
                    // 注意如果传进去的数据的数组长度小于pageSize，next-paging会自动判断没有更多数据了
                    // 模拟ajax请求
                    await new Promise(res => setTimeout(res, 500))
                    this.$refs.paging.complete([{title: '结尾'}]);
                } else {
                    let arr = []
                    for (let i = 1; i<=pageSize; i++) {
                        arr.push({title: '测试item:'+ ((pageNo-1)*pageSize + i)})
                    }
                    // 模拟ajax请求
                    await new Promise(res => setTimeout(res, 500))
                    this.$refs.paging.complete(arr);
                }
            }
        }
    };
</script>

<style>

</style>
